<template>
  <div style="display: inline;">
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept="image/*" @change="handleClick">
    <button class="d_btn font14 text_white bg_blue" @click="handleUpload">
      {{text}}
    </button>
  </div>
</template>

<script>

export default {
  props: {
    text: {
      type: String,
      default: '导入'
    },
    onSuccess: Function// eslint-disable-line
  },
  data() {
    return {

    }
  },
  methods: {
    handleUpload() {
      this.$refs['excel-upload-input'].click()
    },
    handleClick(e) {
      let files = e.target.files
      let rawFile = files[0] 
      let url = window.URL.createObjectURL(rawFile);
      this.onSuccess && this.onSuccess(rawFile, url)
      setTimeout(() => {
        this.$refs['excel-upload-input'].value = ''
      }, 500);
    },
  }
}
</script>

<style scoped>
.excel-upload-input{
  display: none;
  z-index: -9999;
}
.d_btn {
  height: 40px;
  padding: 0 21px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
</style>
